<template>
	<view class="page">
		<!-- 消息提示组件 -->
		<u-notify ref="uNotify"></u-notify>

		<view class="banner">
			<text style="font-size: 1em;">登录</text><br>
			<text style="font-size: 1.6em;font-weight: bold;margin-top: 20px;">欢迎回来</text>
		</view>

		<view class="login-form">
			<u-form labelPosition="top" labelWidth="500rpx" :labelStyle="labelStyle" :borderBottom="false"
				:model="loginForm" ref="loginform">
				<u-form-item label="用户名" prop="username" :borderBottom="false" required>
					<u-input v-model="loginForm.username" shape="circle" maxlength="12" :showWordLimit="true">
					</u-input>
				</u-form-item>

				<u-form-item label="密码" prop="password" :borderBottom="false" required>
					<u-input v-model="loginForm.password" shape="circle" :type="passwordType">
						<template #suffix>
							<u-icon v-if="showPassword" name="lock-open" @click="chageShowPassword()">
							</u-icon>
							<u-icon v-else name="lock" @click="chageShowPassword()"></u-icon>
						</template>
					</u-input>
				</u-form-item>

				<u-form-item label="验证码" prop="captchaCode" :borderBottom="false" required>
					<view>
						<u-input v-model="loginForm.captchaCode" shape="circle">
							<template #suffix>
								<view class="kaptcha">
									<u-image width="220rpx" height="60rpx" radius="20px" :src="kaptchaSrc"
										ref="kaptchaImg" mode="aspectFit" @click="getKaptchaImg"></u-image>
								</view>
							</template>
						</u-input>
					</view>
				</u-form-item>
				<u-form-item :borderBottom="false">
					<u-button type="success" shape="circle" @click="login">登录</u-button>
				</u-form-item>
				<u-form-item :borderBottom="false">
					<u-row>
						<u-col span="6">
							<u-text type="info" text="注册账号" size="12" @click="toRegister"></u-text>
						</u-col>
						<u-col span="6">
							<u-text type="info" text="忘记密码" size="12" @click="forgotPassword" align="right"></u-text>
						</u-col>
					</u-row>
				</u-form-item>
			</u-form>
		</view>
		<view class="foot">
			合抱之木，生于毫末
		</view>
	</view>
</template>

<script>
	import $api from "../../api/api.js";

	export default {
		computed: {
			passwordType: function() {
				return this.showPassword ? "text" : "password"
			},
			kaptchaSrc() {
				return "data:image/jpeg;base64," + this.kaptchaImgData
			}
		},
		data() {
			return {
				// 验证码图片base64数据
				kaptchaImgData: "",
				showPassword: false,
				// 标签样式
				labelStyle: {
					paddingLeft: '5px',
					paddingBottom: '3px',
				},
				loginForm: {
					captchaCode: "",
					password: "",
					username: "admin"
				},
				rules: {
					username: [
						// 必填规则
						{
							required: true,
							message: '此为必填字段',
							transform(value) {
								return String(value);
							},
							// blur和change事件触发检验
							trigger: ['blur', 'change'],
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9a-zA-Z]*$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字'
						},
						// 5-12个字符之间的判断
						{
							min: 5,
							max: 12,
							message: '长度在5-12个字符之间'
						},
					],
					password: [
						// 必填规则
						{
							required: true,
							message: '此为必填字段',
							transform(value) {
								return String(value);
							},
							// blur和change事件触发检验
							trigger: ['blur', 'change'],
						},
						// 正则判断为字母或数字
						{
							pattern: /^[a-zA-Z]+[0-9a-zA-Z.*-/$#%&^@!~]*$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母和数字及特殊字符'
						},
						// 6-24个字符之间的判断
						{
							min: 6,
							max: 24,
							message: '长度在6-24"个字符之间'
						},
					],
					captchaCode: [
						// 必填规则
						{
							required: true,
							message: '此为必填字段',
							transform(value) {
								return String(value);
							},
							// blur和change事件触发检验
							trigger: ['blur', 'change'],
						},
						// 验证码长度判断
						{
							min: 5,
							max: 5,
							message: '验证码长度为5个字符'
						},
					]
				},
			}
		},
		methods: {
			login() {
				this.$refs.loginform.validate().then(valid => {
					// uni.$u.toast('校验通过')
					// 请求登录接口
					$api.user.login(this.loginForm).then(res => {
						// console.log(res);
						if (res.data.code == 200) {
							this.$refs.uNotify.success(res.data.msg)
							// 跳转首页
							uni.switchTab({
								url: '/pages/index/index',
							})
						} else {
							this.$refs.uNotify.error(res.data.msg)
						}
					})
				}).catch(errors => {
					console.log(errors);
					// uni.$u.toast('填写校验失败')
				})
			},
			chageShowPassword() {
				this.showPassword = !this.showPassword
			},
			getKaptchaImg() {
				$api.test.getKaptcha().then(base64 => {
					// console.log(res);
					// 得到的是图片的 base64数据,通过计算属性拼接渲染到img 
					this.kaptchaImgData = base64
				})
			},

			toRegister() {
				uni.redirectTo({
					url: "/pages/register/register"
				})
			},
			forgotPassword() {
				// todo: 忘记密码功能
				this.$refs.uNotify.warning('忘了就忘了吧! 懒得实现找回功能了!')
			}
		},
		onReady() {
			//onReady 为form 设置校验规则
			this.$refs.loginform.setRules(this.rules)
			this.getKaptchaImg()
		},
	}
</script>

<style>
	.page {
		height: 100vh;
		background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
	}

	.banner {
		height: 60px;
		padding-top: 60px;
		padding-left: 30px;
		color: #ffffff;
		letter-spacing: 5px;
		/* background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); */
	}

	.login-form {
		margin: 30px;
		padding: 30px;
		border-radius: 20px;
		background-color: #ffffff;
	}

	.kaptcha {
		border-radius: 20px;
		border: 1px solid #999999;
	}

	.foot {
		position: fixed;
		bottom: 20px;
		margin: auto;
		left: 0;
		right: 0;
		width: 500rpx;
		color: aliceblue;
		text-align: center;
	}
</style>